
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 组件</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-组件FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="组件 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link current">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>组件</h1>
    
    <p>组件是FairyGUI中的一个基础容器。组件可以包含一个或多个基础显示对象，也可以包含组件。</p>
<h2 id="组件属性"><a href="#组件属性" class="headerlink" title="组件属性"></a>组件属性</h2><p>在舞台上点击<strong>空白处</strong>，右边属性栏显示的是容器组件的属性：</p>
<p><img src="../../images/QQ20191211-095458.png" alt></p>
<ul>
<li><p><code>尺寸</code> 设置组件的宽度和高度。</p>
</li>
<li><p><code>最小尺寸</code> <code>最大尺寸</code> 设置组件的尺寸限制，0表示不限制。注意：修改尺寸限制不会修改当前的宽高，即使当前的宽高值超出限制。</p>
</li>
<li><p><code>轴心</code> 旋转、缩放、倾斜这些变换时的轴心点。取值范围是0~1。例如X=0.5，Y=0.5表示中心位置。点击右边的小三角形可以快速设置一些常用的值，比如中心，左下角，右下角等。</p>
</li>
<li><p><code>同时作为锚点</code> 勾选这个选项后，元件的原点位置将设置为轴心所在的位置。默认情况下，每个元件的(0,0)都是在左上角；勾选了轴心同时作为锚点后，则元件的(0,0)在轴心的位置。</p>
</li>
<li><p><code>初始名字</code> 当组件被实例化（限编辑器内）时，自动设置组件的名称为这里设置的值。最常见的用途就是，FairyGUI里要求窗口框架组件需命名为frame，那么你创作了一个窗口框架组件后，设置“初始名字”为frame，以后每次拖入这个组件，自动就取好名字了，不用每次修改。</p>
</li>
<li><p><code>溢出处理</code> 表示处理超出组件矩形区域的内容的方式。注意：<strong>溢出处理</strong>不支持在代码里动态修改。</p>
<ul>
<li><code>可见</code> 表示超出组件矩形区域的内容保持可见，这是默认行为。</li>
<li><code>隐藏</code> 表示超出组件矩形区域的内容不可见，相当于对组件应用了一个矩形遮罩。</li>
<li><code>垂直滚动</code> <code>水平滚动</code> <code>自由滚动</code> 与其他UI框架很大不同，在FairyGUI中不需要拖入滚动控件实现滚动。任何一个普通的组件，只需要简单设置一个属性就可以使组件具有滚动功能。溢出处理中有三种滚动的选择，自由滚动就是横向和纵向都能滚动。详细说明在<a href="scrollpane.html">滚动容器</a>。</li>
</ul>
</li>
<li><p><code>边缘</code> 设定组件四周的留空。一般用在“溢出处理”为“隐藏”或者“滚动”的情况。边缘虚化目前只有在Unity平台支持。如果组件发生了对内容的剪裁，则可以在边缘产生虚化的效果，增强用户体验。这个值应该比较大才能看出效果，例如50。</p>
<p><img src="../../images/QQ20191211-111027.png" alt></p>
</li>
<li><p><code>自定义遮罩</code> 详细说明在<a href="#遮罩">遮罩</a>。</p>
<ul>
<li><code>反向（挖洞）</code> </li>
</ul>
</li>
<li><p><code>点击测试</code> 详细说明在<a href="#点击测试">点击测试</a>。</p>
</li>
<li><p><code>点击穿透</code> 默认情况下，组件的矩形区域（宽x高）将拦截点击，勾选后，点击事件可以穿透组件中<strong>没有内容</strong>的区域。详细说明在<a href="#点击穿透">点击穿透</a>。</p>
</li>
<li><p><code>扩展</code> 详细说明在<a href="#扩展">扩展</a>。</p>
</li>
<li><p><code>背景颜色</code> 设置组件编辑区域的背景颜色，仅用于辅助设计，实际组件背景都是空白的，不会有颜色。如果你需要组件有一个真实的背景色，可以放置一个图形。</p>
</li>
</ul>
<h2 id="其他属性"><a href="#其他属性" class="headerlink" title="其他属性"></a>其他属性</h2><ul>
<li><p><code>自定义属性</code> 当组件被拖入到到其他组件后，能通过检查器设置的属性一般是固定的，例如一个按钮，我们可以改变它的标题、图标、是否选中等，这些都是编辑器提供的固定属性。但如果我在按钮中放置了额外的文本或者装载器，而且需要设定他们在实例化后的属性时，就需要用自定义属性，将组件的子元件甚至更深层次的元件的属性暴露出来。</p>
<p>点击“编辑”弹出如下界面：</p>
<p><img src="../../images/QQ20191211-111956.png" alt></p>
<ul>
<li><code>元件名称</code> 元件的名称，可以用”.”引用更深层次的元件，例如n0.n1.n2,表示组件n0的孩子n1的孩子n2。</li>
<li><code>属性类型</code> 目前支持两种属性：文本和图标。</li>
<li><code>备注</code> 可选填。如果填写了，则在检查器内使用这里的内容作为标题。</li>
</ul>
<p>定义好后，将组件拖入其他组件，可以看到右边检查器会增加了一个新的面板：</p>
<p><img src="../../images/QQ20191211-112303.png" alt></p>
<p>勾选后就能修改这里的值。自定义属性仅用于编辑器内。运行时无需这种机制。因为运行时你可以用GetChild获得任何对象。</p>
</li>
<li><p><code>自定义数据</code> 可以设置一个自定义的数据，这个数据FairyGUI不做解析，按原样发布到最后的描述文件中。开发者可以在运行时获取。获取方式为：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//Unity/Cry/Laya/Egret</span></span><br><span class="line">aComponent.baseUserData;</span><br><span class="line"></span><br><span class="line"><span class="comment">//Cocos2dx/Vision</span></span><br><span class="line">aComponent-&gt;getBaseUserData();</span><br><span class="line"></span><br><span class="line"><span class="comment">//AS3/Starling</span></span><br><span class="line">aComponent.packageItem.componentData.@customData;</span><br></pre></td></tr></table></figure>
<p><strong>自定义数据的定义位置有两处</strong>，请注意和<a href="object.html#自定义数据">元件的自定义数据</a>区分，</p>
</li>
</ul>
<h2 id="设计图功能"><a href="#设计图功能" class="headerlink" title="设计图功能"></a>设计图功能</h2><p><img src="../../images/QQ20191211-111159.png" alt></p>
<p>可以设定一个组件的设计图。设计图将显示在舞台上，可以设置显示在组件内容的底层或者上层。使用设计图可以使拼接UI更加快速和精准。</p>
<p>设计图不会发布到最终的资源中。</p>
<h2 id="点击穿透"><a href="#点击穿透" class="headerlink" title="点击穿透"></a>点击穿透</h2><p>组件内，显示在前面的元件将优先收到点击事件。如果该元件是可触摸的，则点击事件结束，不会继续向后传递。</p>
<p>在组件宽度x高度的范围内点击测试都是有效的（无法穿透），无论这个范围内是否有子元件。举个例子说明。</p>
<p>这是组件A，大小为400x400，内容为4个白色的矩形：</p>
<p><img src="../../images/2015-12-21_164631.png" alt></p>
<p>这是组件B，大小为400x400，内容为一个红色的矩形：</p>
<p><img src="../../images/2015-12-21_164656.png" alt></p>
<p>将B先添加进舞台，然后再添加A到舞台，也就是说，A显示在B的前面，效果如下图：</p>
<p><img src="../../images/2015-12-21_165100.png" alt></p>
<p>可以看到，虽然A在B的上面，但红色方块是可见的，因为A在此区域并没有内容。当点击图中绿色点的位置时，点击事件将在A上面触发，而B是点击不了的。这是因为在A的范围内，点击是不能穿透的。</p>
<p>如果希望A能被穿透应该怎样？组件属性里提供设置：<img src="../../images/20170802103448.png" alt>，勾选即可。代码里也可以设置：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//true表示不可穿透，false表示可穿透。</span></span><br><span class="line">aComponent.opaque = <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>
<p>设置穿透后，只有点击4个白块时，A才接收到点击事件，如果点击绿色点位置，B将接收到点击事件。<strong>这个特性在设计一些全屏界面时尤其要注意。例如一个主界面添加到舞台，并设置为全屏，如果不穿透的话，那么Stage.isTouchOnUI将一直返回true。</strong></p>
<p><strong>注意：图片和普通文字是不接受点击的，如果一个只含有图片或普通文字的组件，设置了点击穿透，那么整个组件就是完全穿透了，不会拦截到任何点击。</strong></p>
<h2 id="点击测试"><a href="#点击测试" class="headerlink" title="点击测试"></a>点击测试</h2><p>有些特殊需求，需要用到不规则区域的点击测试。FairyGUI提供了两种方案解决这种需求：</p>
<ol>
<li><p>组件内拖入一个图形，形状选多边形，然后用多边形勾画出不规则区域的形状。最后在组件的“点击测试”属性里，选择这个图形元件。</p>
</li>
<li><p>如果不规则形状为圆环等其它带洞的形状，那么用图形无法画出来。这时，可以用像素检测。</p>
<p>首先你要准备一张包含不规则区域的图片，图片里不透明的像素代表接受点击的区域，透明的像素代表点击穿透的区域，组件里超出图片范围的也是可穿透的区域。</p>
<p>把这张图片拖入舞台，然后在组件的“点击测试”属性里，选择这张图片。</p>
<p><strong>注意：用于像素检测的这张图片只能放置在和组件同一个包内，也不能用装载器，只能是图片。</strong></p>
</li>
</ol>
<h2 id="遮罩"><a href="#遮罩" class="headerlink" title="遮罩"></a>遮罩</h2><p>FairyGUI的遮罩有两种：矩形遮罩和自定义遮罩。</p>
<h3 id="矩形遮罩"><a href="#矩形遮罩" class="headerlink" title="矩形遮罩"></a>矩形遮罩</h3><p>将组件的“溢出处理”设置为“隐藏”或者“滚动”，那么组件就带了矩形遮罩。超出组件(矩形区域-边缘留空）的区域都不可见。无论在什么平台，这种遮罩的效率是最高的。</p>
<h3 id="自定义遮罩"><a href="#自定义遮罩" class="headerlink" title="自定义遮罩"></a>自定义遮罩</h3><p>可以设置组件内一个图片或者图形作为组件的遮罩。这种遮罩一般都是使用模板测试(Stencil Op)技术。</p>
<p>当使用图形（Graph）作为遮罩时，有图形的区域内容<strong>可见</strong>，例如，一个圆形，则圆形区域内<strong>可见</strong>，其他区域不可见。</p>
<p>当使用图片作为遮罩时，图片内透明度为0的像素对应区域的内容<strong>不可见</strong>，反之可见。超出图片区域的内容<strong>不可见</strong>。</p>
<p>备注：</p>
<ol>
<li><p>Starling平台要使用自定义遮罩必须在应用程序描述文件里加上:</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">&lt;initialWindow&gt;</span><br><span class="line">    &lt;depthAndStencil&gt;<span class="literal">true</span>&lt;/depthAndStencil&gt;</span><br><span class="line">&lt;/initialWindow&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>AS3平台不支持用图片做遮罩。</p>
</li>
<li>Unity平台：如果你要对使用了自定义遮罩的组件进行设置倾斜、设置BlendMode，设置滤镜，又或者曲面UI中含有自定义遮罩的组件时，需要额外的设置才能显示正常。请参考<a href="../unity/special.html#PaintMode">PaintMode</a></li>
</ol>
<h3 id="反向遮罩（挖洞）"><a href="#反向遮罩（挖洞）" class="headerlink" title="反向遮罩（挖洞）"></a>反向遮罩（挖洞）</h3><p>效果和正常遮罩相反，也就是可见的区域变不可见，不可见的区域变可见。例如：</p>
<p><img src="../../images/20170622162422.png" alt></p>
<p>使用图形（Graph）作为遮罩时，有图形的区域内容<strong>不可见</strong>，例如，一个圆形，则圆形区域内不可见，其他区域可见。</p>
<p>使用图片（Image）作为遮罩时，图片内透明度为0的像素对应区域的内容<strong>可见</strong>，反之不可见。超出图片区域的内容<strong>可见</strong>。</p>
<p>备注：</p>
<ol>
<li>当遮罩发生时，点击测试也同样会发生变化，只有显示出来的内容才接受点击检测，被遮住的内容不接受点击检测。</li>
<li>对于正在编辑的组件，遮罩只有在预览时才能看到效果。</li>
<li>定义了遮罩的组件，其内部的元件永远无法和外部的元件合并Draw Call，因为他们有不同的材质属性。</li>
<li>只有部分平台支持使用图片做反向遮罩，请以测试结果为准。</li>
</ol>
<h2 id="扩展"><a href="#扩展" class="headerlink" title="扩展"></a>扩展</h2><p><img src="../../images/QQ20191211-120901.png" alt></p>
<p>可以看到有六种“扩展”选择。组件可以随意在这些“扩展”中切换。选择哪种“扩展”，组件就有了那种扩展的属性和行为特性。</p>
<p>下面以按钮为例，介绍一下“扩展”是怎样工作的。选择“扩展”为按钮后，可以看到属性面板下方出现了按钮相关的提示和设置。</p>
<p><img src="../../images/QQ20191211-121438.png" alt></p>
<p>这里先忽略按钮组件的设置，后续教程会详细说明。从提示可以看到，FairyGUI中“扩展”的定义方式是以“名称约定”为基础的。一个按钮，可以带有标题和图标，这个标题（一般是一个文本）和图标（一般是一个装载器）需要你自己放置到组件中，并把他们名字设置为title和icon，就像这样：</p>
<p><img src="../../images/2016-01-11_183043.jpg" alt></p>
<p>然后我们测试一下这个刚制作好的组件。把按钮组件拖到另一个组件中，并设置一下“标题”和“图标”，如下图</p>
<p><img src="../../images/QQ20191211-121620.png" alt></p>
<p>效果出来了。这说明标题文本被自动设置到了名称为“title”的文本元件上，图标被自动设置到了名称为“icon”的装载器元件上。</p>
<p>如果按钮组件里没有放置名称为icon的装载器控件呢？那么设置图标就没有效果，仅此而已。其他约定的处理方式也相同。不会有任何报错。</p>
<p>从按钮的设计就可以看出FairyGUI“扩展”功能的优势所在。如果一个编辑器提供了现成的按钮组件，无论设计者考虑多么周到，都无法覆盖所有需求，就一个按钮，随便想到的变化就可能有：是否带图标/图标在左边还是右边/图标与文字的距离/是否带文字/文字的颜色/文字的大小等等。而在FairyGUI里，按钮组件内所有东西都是任由你布置的。</p>
<p>“扩展”还赋予了组件行为，具体到按钮上，就是处理各种鼠标或触摸事件，按下时改变状态（单选/多选），单击时播放声音等等。这些都是由“扩展”的底层去处理的。这部分同样是通过“名称约定”来工作的。例如，按钮内只要提供了名称为“button”的控制器，当鼠标悬浮在按钮上方时，就会自动切换该控制器到“over”页面；当鼠标按下时，就会自动切换该控制器到“down”页面，等等。如果按钮没有提供名称为“button”的控制器呢？上述行为就不会发生。按钮控制器并不是必须的，如果你不需要以上行为，就不用提供。</p>
<p>其他类型的“扩展”的工作方式与按钮类似。后续文档会详细介绍每种“扩展”的属性和行为。</p>
<h2 id="GComponent"><a href="#GComponent" class="headerlink" title="GComponent"></a>GComponent</h2><p>组件支持动态创建，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">GComponent gcom = <span class="keyword">new</span> GComponent();</span><br><span class="line">gcom.SetSize(<span class="number">100</span>,<span class="number">100</span>);</span><br><span class="line">GRoot.inst.AddChild(gcom);</span><br></pre></td></tr></table></figure>
<p>动态创建的组件是空组件，可以作为其他组件的容器。一个常见的用途，如果你要建立一个多层的UI管理系统，那么空组件就是一个合适的层级容器选择。动态创建的组件默认是点击穿透的，也就是说如果直接new一个空组件作为接收点击用途，你还得这样设置：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//设置组件点击不穿透。</span></span><br><span class="line">gcom.opaque = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>
<p>如果要创建UI库里的组件，应该使用这样的方式：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">GComponent gcom = UIPackage.CreateObject(<span class="string">"包名"</span>,<span class="string">"组件名"</span>).asCom;</span><br><span class="line">GRoot.inst.AddChild(gcom);</span><br></pre></td></tr></table></figure>
<p>FairyGUI和Flash/Cocos类似，采用树状的结构组织显示对象。容器可以包含一个或多个基础显示对象，也可以包含容器。这个树状结构称为显示列表。FairyGUI提供了API管理显示列表。</p>
<h3 id="显示列表管理"><a href="#显示列表管理" class="headerlink" title="显示列表管理"></a>显示列表管理</h3><ul>
<li><p><code>numChildren</code> 获得容器内孩子元件的数量。</p>
</li>
<li><p><code>AddChild</code> <code>AddChildAt</code> 向容器内添加元件。前者将元件添加到显示列表的队尾；后者可以指定一个索引控制元件的插入位置。</p>
</li>
<li><p><code>RemoveChild</code> <code>RemoveChildAt</code> <code>RemoveChildren</code> 从容器内删除元件。当元件从显示对象中移出时，将不再占用显示资源。但元件从显示列表移出后，只是不显示，并没有销毁，如果你没有保存这个对象的引用留待后续使用，或者没有调用对象的Dispose方法销毁对象，那么会产生内存泄露。</p>
</li>
<li><p><code>GetChild</code> <code>GetChildAt</code> 通过索引或名称获得元件引用。元件的名字是允许重复的，在这种情况下，GetChild返回第一个匹配名称的对象。</p>
</li>
<li><p><code>GetChildIndex</code> 获得指定元件在显示列表中的索引。</p>
</li>
<li><p><code>SetChildIndex</code> <code>SwapChildren</code> <code>SwapChildrenAt</code> 设置元件在显示列表中的索引。</p>
</li>
</ul>
<h3 id="渲染顺序"><a href="#渲染顺序" class="headerlink" title="渲染顺序"></a>渲染顺序</h3><p>在FairyGUI中，显示列表是以树形组织的，下面说的渲染顺序均指在<strong>同一个父元件</strong>下安排的顺序，不同父元件的元件是不可能互相交错的，这是前提，请注意。</p>
<p>显示对象的渲染顺序取决于它的显示列表中的顺序，顺序大的后渲染，即显示在较前面。一般来说，我们都是使用AddChild或SetChildIndex调整渲染顺序。例如如果要一个元件显示在容器的最前面，那调用AddChild(元件)就可以了，AddChild是可以重复调用的。也可以调用SetChildIndex设置对象在显示列表中的具体位置，例如SetChildIndex(元件,0)就可以将元件置于最底层。</p>
<p>还有另外一个因子可以影响渲染循序，它就是GObject.sortingOrder。<strong>这个属性只用于特定的用途，不作常规的使用。它一般用于类似固定置顶的功能，另外，永远不要将sortingOrder用在列表中。</strong>sortingOrder越大，则渲染顺序越后，即显示到更前面的位置。一般情况下，sortingOrder为0，这时渲染顺序由显示对象在显示列表中的顺序决定。sortingOrder可以令你更灵活的控制渲染循序。例如，如果希望一个元件始终保持在其他元件上方，可以设置其sortingOrder一个较大的整数值，这样无论容器使用AddChild添加了多少元件，这个元件依然显示在最前面。（sortingOrder的效率较差，勿做频繁调用的用途）</p>
<p>上面提到的都是调整对象在显示列表中的顺序，如果不想调整这个顺序的同时，又要调整渲染顺序，组件还提供了另一种方式。</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//升序，这是默认值，按照对象在显示列表中的顺序，从小到大依次渲染，效果就是序号大的显示在较前面。</span></span><br><span class="line">aComponent.childrenRenderOrder = ChildrenRenderOrder.Ascent;</span><br><span class="line"></span><br><span class="line"><span class="comment">//降序，按照对象在显示列表中的顺序，从大到小依次渲染，效果就是序号小的显示在较前面。</span></span><br><span class="line">aComponent.childrenRenderOrder = ChildrenRenderOrder.Descent;</span><br><span class="line"></span><br><span class="line"><span class="comment">//拱形，需要指定一个顶峰的索引，从两端向这个索引位置依次渲染，效果就是这个位置的对象显示在最前面，两边的对象依次显示在后面。</span></span><br><span class="line">aComponent.childrenRenderOrder = ChildrenRenderOrder.Arch;</span><br><span class="line">aComponent.apexIndex = <span class="number">3</span>; <span class="comment">//索引为3的对象显示在最前面。</span></span><br></pre></td></tr></table></figure>
<h3 id="绑定扩展类"><a href="#绑定扩展类" class="headerlink" title="绑定扩展类"></a>绑定扩展类</h3><p>可以绑定一个类为组件的扩展类。首先，编写一个扩展类：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title">MyComponent</span> : <span class="title">GComponent</span></span><br><span class="line">&#123;</span><br><span class="line">    GObject msgObj;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//如果你有需要访问容器内容的初始化工作，必须在这个方法里，而不是在构造函数里。各个SDK的函数原型的参数可能略有差别，请以代码提示为准。在Cocos2dx/CocosCreator里，方法的名字是onConstruct，且不带参数</span></span><br><span class="line">    <span class="function"><span class="keyword">override</span> <span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">ConstructFromXML</span>(<span class="params">XML xml</span>)</span></span><br><span class="line"><span class="function"></span>    &#123;</span><br><span class="line">        <span class="keyword">base</span>.ConstructFromXML(xml);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">//在这里继续你的初始化</span></span><br><span class="line">        msgObj = GetChild(<span class="string">"msg"</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">ShowMessage</span>(<span class="params"><span class="keyword">string</span> msg</span>)</span></span><br><span class="line"><span class="function"></span>    &#123;</span><br><span class="line">        msgObj.text = msg;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>然后注册你的扩展类。注意，<strong>必须在组件构建前注册</strong>，如果你使用的是UIPanel，那么在Start里注册是不够早的，必须在Awake里，总之，如果注册不成功，90%可能都是注册晚于创建，10%可能是URL错误，这可以通过打印URL排查。</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">UIObjectFactory.SetPackageItemExtension(<span class="string">"ui://包名/组件A”, typeof(MyComponent));</span></span><br></pre></td></tr></table></figure>
<p>这样就为组件A绑定了一个实现类MyComponent 。以后所有组件A创建出来的对象（包括在编辑器里使用的组件A）都是MyComponent类型。然后我们就可以为MyComponent添加API，用更加面向对象的方式操作组件A。例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">MyComponent gcom = (MyComponent)UIPackage.CreateObject(“包名“， ”组件A”);</span><br><span class="line">gcom.ShowMessage(<span class="string">"Hello world"</span>);</span><br></pre></td></tr></table></figure>
<p>注意：如果组件A只是一个普通的组件，没有定义“扩展”，那么基类是GComponent，如上例所示；如果组件A的扩展是按钮，那么MyComponent的基类应该为GButton，如果扩展是进度条，那么基类应该为GProgressBar，等等。这个千万不能弄错，否则会出现报错。</p>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/component.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
